<template>
	<view>
		<view class="wrap">
			<view class="status"></view>
			<view class="u-tabs-box" style="position: relative;z-index: 99;">
				<u-tabs-swiper activeColor="#333333" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="130" @refresh="onPulldownReresh">
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(tabItem,tabIndex) in taskList" :key="tabIndex">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="mark" v-show="current==3&&tabItem.list.length>0">备注：长按可查看失败原因</view>
						<view class="task-item" v-for="(task,index) in tabItem.list" :key="task.id" @longtap="showNote(task)">
							<view class="task-head">
								<view class="title">{{task.type}}</view>
								<view class="bonus">{{task.bonus}}</view>
							</view>
							<view class="task-content">
								<view class="">需求：{{task.need}}</view>
								<view class="">任务地址：<text class="go" @tap="goTask(task)">前往任务目的地</text></view>
								<view class="">时间：{{task.addTime}}</view>
							</view>
							<view class="task-bar" v-if="tabItem.state==1">
								<view class="note" @tap="chooseImg(task,index)"><text v-if="task.file">（已选）</text>添加任务完成截图</view>
								<view class="btn" @tap="uploadImg(task)">提交完成任务</view>
							</view>
						</view>
						<view style="margin-top: 30rpx;">
							<u-loadmore :status="tabItem.loadingType" bgColor="#f4f8fb"></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			</mix-pulldown-refresh>
		</view>
		<u-modal v-model="show" title="失败原因" :content="content"></u-modal>
	</view>
</template>

<script>
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
export default {
	data() {
		return {
			show:false,
			content:"",
			taskList: [
				{
					state: 1,
					loadingType: 'loadmore',
					list: [],
					page:1
				},
				{
					state: 2,
					loadingType: 'loadmore',
					list: [],
					page:1
				},
				{
					state: 3,
					loadingType: 'loadmore',
					list: [],
					page:1
				},
				{
					state: 4,
					loadingType: 'loadmore',
					list: [],
					page:1
				}
			],
			list: [
				{
					name: '进行中'
				},
				{
					name: '审核中'
				},
				{
					name: '完成'
				},
				{
					name: '失败'
				}
			],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
			limit:10
		};
	},
	onLoad() {
		this.loadMore();
	},
	methods: {
		onPulldownReresh(){
			setTimeout(()=>{
				this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
				this.taskList = [
					{
						state: 1,
						loadingType: 'loadmore',
						list: [],
						page:1
					},
					{
						state: 2,
						loadingType: 'loadmore',
						list: [],
						page:1
					},
					{
						state: 3,
						loadingType: 'loadmore',
						list: [],
						page:1
					},
					{
						state: 4,
						loadingType: 'loadmore',
						list: [],
						page:1
					}
				];
				this.loadMore();
			},500)
		},
		reachBottom() {
			this.loadMore();
		},
		// 页面数据
		async loadMore(status) {
			//这里是将订单挂载到tab列表下
			let index = this.current;
			let navItem = this.taskList[index];
			if(status === 'tabChange' && navItem.loaded === true){
				//tab切换只有第一次需要加载数据
				return;
			}
			if(navItem.loadingType === 'loading'||navItem.loadingType === 'nomore'){
				//防止重复加载
				return;
			}

			navItem.loadingType = 'loading';
			await this.$request.post("/task/getMemberTask", {
				data:{
					status:navItem.state,
					page:navItem.page,
					limit:this.limit
				},
				dataType: 'json',
				responseType: 'text'
			})
			.then(res => {
				if(res.data.json&&res.data.json.length>0){
					navItem.list = navItem.list.concat(res.data.json);
					navItem.page++;
					navItem.loadingType = res.data.json.length>=this.limit?'loadmore':"nomore";
				}else {
					navItem.loaded = true;
					navItem.loadingType = 'nomore';
				}
			})
		},
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
			this.loadMore("tabChange");
		},
		chooseImg(target,index){
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success: (res)=> {
					let filePath = res.tempFilePaths.path || res.tempFilePaths[0];
					// target.file = filePath;
					// this.taskList[this.current].list[index].file = filePath;
					// this.$forceUpdate();
					this.$set(this.taskList[this.current].list[index], "file",filePath);
				}
			});
		},
		uploadImg(target){
			if(!target.file){
				this.$api.msg("请添加任务截图");
				return;
			}
			uni.showLoading({
				title:"正在提交",
				mask:true
			})
			this.$request.upload("/task/submit",{
				data:{
					id:target.id
				},
				filePath:target.file,
				dataType: 'json',
				responseType: 'text'
			})
			.then(res => {
				uni.hideLoading();
				this.$api.msg("提交成功");
				this.taskList[0].list.splice(this.taskList[0].list.indexOf(target),1);
				//如果审核中已经加载过数据则直接进行添加
				if(this.taskList[1].loaded){
					this.taskList[1].list.unshift(target);
				}
			})
			.catch(error => {
				uni.hideLoading();
			});
		},
		showNote(target){
			if(target.status==4){
				this.show = true;
				this.content = target.note;
			}
		},
		goTask(target){
			if(target.type=="抖音"){
				if(uni.getSystemInfoSync().platform == 'ios'){
					plus.runtime.openURL("https://www.iesdouyin.com/share/video/"+target.address);
				}else{
					plus.runtime.openURL("snssdk1128://aweme/detail/"+target.address+"?refer=web&gd_label=click_wap_download_banner&appParam=&needlaunchlog=1",function(res){
					})
				}
			}else{
				plus.runtime.openURL(target.address);
			}
		}
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f4f8fb;
}
/* #endif */
</style>

<style lang="scss" scoped>
.status{
	/* #ifdef APP-PLUS */
	background-color: #FFFFFF;
	height:var(--status-bar-height);
	/* #endif */
}
.task-item{
	width: 96%;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 10rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.task-head{
		display: flex;
		justify-content: space-between;
		.title{
			color: #989797;
			font-size: 40rpx;
		}
		.bonus{
			color: red;
			font-size: 40rpx;
		}
	}
	.task-content{
		margin-top: 20rpx;
		border-radius: 14rpx;
		padding: 20rpx 0 0;
		font-size: 26rpx;
		line-height: 50rpx;
		border-top:1px solid #e5e5e5;
		.go{
			color: #2989f0;
		}
	}
	.task-bar{
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		.note{
			font-size: 26rpx;
			color: #2989f0;
		}
		.btn{
			padding: 15rpx 40rpx;
			background-color: #333333;
			color: #FFFFFF;
			font-size: 26rpx;
			border-radius: 20rpx;
		}
	}
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
	image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
.mark{
	padding-top: 30rpx;
	padding-left: 30rpx;
	font-size: 28rpx;
	color: #787676;
}
</style>
